<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分页功能示例</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }

        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
        }

        th,
        td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }

        th {
            background-color: #f2f2f2;
        }

        .pagination {
            display: flex;
            list-style-type: none;
            padding: 0;
        }

        .pagination li {
            margin-right: 5px;
        }

        .pagination li a {
            display: block;
            padding: 5px 10px;
            border: 1px solid #ddd;
            text-decoration: none;
            color: #007BFF;
        }

        .pagination li a:hover {
            background-color: #f2f2f2;
        }

        .pagination li.active a {
            background-color: #007BFF;
            color: white;
        }
    </style>
</head>

<body>
    <table id="data-table">
        <thead>
            <tr>
                <th>ID</th>
                <th>用户名</th>
                <th>内容</th>
                <th>时间</th>
            </tr>
        </thead>
        <tbody id="table-body"></tbody>
    </table>
    <ul class="pagination" id="pagination">
        <li><a href="#">上一页</a></li>
        <li class="active"><a href="#">1</a></li>
        <li><a href="#">下一页</a></li>
    </ul>

    <script>
        const data = [
            { id: 293, username: "老李", content: "大家好啊", time: "2023-02-23 14:00:44" },
            { id: 258, username: "是是是", content: "三生三世", time: "2021-09-24 15:07:16" },
            { id: 257, username: "是是是", content: "三生三世", time: "2021-09-24 15:07:15" },
            { id: 256, username: "是是是", content: "三生三世", time: "2021-09-24 15:07:15" },
            { id: 255, username: "是是是", content: "三生三世", time: "2021-09-24 15:07:15" },
            { id: 254, username: "是是是", content: "三生三世", time: "2021-09-24 15:06:53" },
            { id: 253, username: "各个风格", content: "腹股沟管", time: "2021-09-24 14:42:22" },
            { id: 252, username: "密码", content: "是华菱", time: "2021-09-24 12:11:59" },
            { id: 251, username: "密码", content: "是华菱", time: "2021-09-24 12:11:57" },
            { id: 250, username: "密码", content: "是华菱", time: "2021-09-24 12:11:56" },
            { id: 250, username: "密码", content: "是华菱", time: "2021-09-24 12:11:56" },
            { id: 250, username: "密码", content: "是华菱", time: "2021-09-24 12:11:56" },
            { id: 250, username: "密码", content: "是华菱", time: "2021-09-24 12:11:56" },
            { id: 250, username: "密码", content: "是华菱", time: "2021-09-24 12:11:56" },
            { id: 250, username: "密码", content: "是华菱", time: "2021-09-24 12:11:56" },
            { id: 250, username: "密码", content: "是华菱", time: "2021-09-24 12:11:56" },
            { id: 250, username: "密码", content: "是华菱", time: "2021-09-24 12:11:56" },
            { id: 250, username: "密码", content: "是华菱", time: "2021-09-24 12:11:56" },
            { id: 250, username: "密码", content: "是华菱", time: "2021-09-24 12:11:56" },
            { id: 250, username: "密码", content: "是华菱", time: "2021-09-24 12:11:56" },
        ];
        const itemsPerPage = 5;
        const totalPages = Math.ceil(data.length / itemsPerPage);
        let currentPage = 1;

        const renderTable = (page) => {
            const start = (page - 1) * itemsPerPage;
            const end = start + itemsPerPage;
            const tableBody = document.getElementById('table-body');
            tableBody.innerHTML = data.slice(start, end).map(item =>
                `<tr><td>${item.id}</td><td>${item.username}</td><td>${item.content}</td><td>${item.time}</td></tr>`
            ).join('');
        };

        const renderPagination = () => {
            const pagination = document.getElementById('pagination');
            pagination.innerHTML = `
                <li><a href="#">上一页</a></li>
                <li class="active"><a href="#">${currentPage}</a></li>
                <li><a href="#">下一页</a></li>
            `;
            const links = pagination.querySelectorAll('a');
            links[0].addEventListener('click', e => {
                e.preventDefault();
                if (currentPage > 1) {
                    currentPage--;
                    renderTable(currentPage);
                    renderPagination();
                }
            });
            links[2].addEventListener('click', e => {
                e.preventDefault();
                if (currentPage < totalPages) {
                    currentPage++;
                    renderTable(currentPage);
                    renderPagination();
                }
            });
        };

        renderTable(currentPage);
        renderPagination();
    </script>
</body>

</html>